<template>
  <div class="toggle-base-map">
    <img src="../assets/images//yingxiangtu.png" alt="" @click="toggleYingxiang" />
    <img src="../assets/images/shiliangtu.png" alt="" @click="toggleShiliang" />
  </div>
</template>

<script setup>
import { vecLayerGroup, imgLayerGroup } from '../map_libs/tianditu'

import { gaodeLayerGroup } from '../map_libs/gaode'
import { guangguLayer } from '../map_libs/guanggumap'
let map = ref(null)

onMounted(() => {
  map.value = useGlobalMap()
})

function toggleYingxiang() {
  map.value.getLayers().clear()
  map.value.addLayer(imgLayerGroup)
  map.value.addLayer(guangguLayer)
}
function toggleShiliang() {
  map.value.getLayers().clear()
  map.value.addLayer(vecLayerGroup)
  map.value.addLayer(guangguLayer)
}
</script>

<style lang="less" scoped>
.toggle-base-map {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 5px;
  bottom: 155px;
  width: 150px;
  height: 80px;
  z-index: 1;
  img {
    width: 70px;
    height: 70px;
    border: 1px solid #ccc;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 5px 2px #666;
  }
}
</style>
